<template>
  <a-modal v-model:open="isShow" title="编辑" @cancel="handleCancel" style="width: 700px">
    <a-form
        ref="baseForm"
        :model="baseFormState"
        :rules="baseRules"
        :label-col="{span: 5 }"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item ref="bookingNo" label="提单号" name="bookingNo">
            <a-input v-model:value="baseFormState.bookingNo" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="containerNo" label="柜号" name="containerNo">
            <a-input v-model:value="baseFormState.containerNo" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="stpoCode" label="头程计划号" name="stpoCode">
            <a-input v-model:value="baseFormState.stpoCode" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="shipOwner" label="船东" name="shipOwner">
            <a-input v-model:value="baseFormState.shipOwner" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="shipmentPort" label="起运港" name="shipmentPort">
            <a-input v-model:value="baseFormState.shipmentPort" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="targetPort" label="目的港" name="targetPort">
            <a-input v-model:value="baseFormState.targetPort" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="containerWeight" label="空柜重(kg)" name="containerWeight">
            <a-input  v-model:value="baseFormState.containerWeight" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="containerType" label="柜型" name="containerType">
            <a-select v-model:value="baseFormState.containerType">
              <a-select-option value="20GP">20GP</a-select-option>
              <a-select-option value="40GP">40GP</a-select-option>
              <a-select-option value="40HQ">40HQ</a-select-option>
              <a-select-option value="45HQ/53FT">45HQ/53FT</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="memo" label="备注" name="memo">
            <a-textarea v-model:value="baseFormState.memo"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="goodsWeightOfWeighingList" label="过磅单货重" name="goodsWeightOfWeighingList">
            <a-input  v-model:value="baseFormState.goodsWeightOfWeighingList" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="takeGoodsErrorRemark" label="海外仓收货异常备注" name="takeGoodsErrorRemark">
            <a-textarea v-model:value="baseFormState.takeGoodsErrorRemark"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item ref="isErrorTakeGoods" label="是否收货异常" name="isErrorTakeGoods">
            <a-select v-model:value="baseFormState.isErrorTakeGoods" :options="selectOptions"></a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, computed, defineProps,reactive, defineEmits,watch } from 'vue'
import {message} from "ant-design-vue";
import {editShippingTrack} from "@/api/firstShipping/shippingMessage.js";
import {getManyDictItems} from "@/api/system/dict.js";
const props = defineProps({
  openBase:{
    type:Boolean,
  },
  baseInfo:{
    type:Object,
  }
})
const baseForm = ref()
const selectOptions = ref([])
const baseFormState = ref({
  takeGoodsErrorRemark:'',
  isErrorTakeGoods:'',
  bookingNo:'',
  containerNo:'',
  shipOwner:'',
  stpoCode:'',
  shipmentPort:'',
  targetPort:'',
  containerWeight:'',
  containerType:'',
  memo:'',
  goodsWeightOfWeighingList:''
})
const baseRules = {
  bookingNo: [
    { required: true, message: '请输入提单号', trigger: 'blur' },
  ],
  containerNo: [
    {
      pattern: /^[A-Z]{4}\d{6,7}$/,
      message: '柜号格式错误'
    }
  ]
}
const emit = defineEmits(['close'])
const isShow = computed(()=>{
  return props.openBase
})
const btnLoading = ref(false)
const handleCancel = () => {
  emit('close','base')
}
const handleOk = async () => {
  const valid = await baseForm.value.validate()
  try{
    btnLoading.value = true
    const res = await editShippingTrack(baseFormState.value)
    message.success('修改成功')
    emit('close','base')
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
watch(()=>isShow.value,async (val)=>{
  if(val){
    baseFormState.value = {...props.baseInfo}
    baseFormState.value.bookingNo = props.baseInfo.soCode
    try{
      const res = await getManyDictItems({
        dictCodeList:"boolean_cn"
      })
      selectOptions.value = res.result.boolean_cn
    }catch (e){
      console.log(e)
    }

  }
})
</script>
<style scoped>

</style>
